import React, { useState, useEffect } from 'react'
import { connect } from 'dva'
import { Input, Button, Modal } from 'antd'
import './index.styl'

const { TextArea } = Input


function ComplaintModel ({ complainReson }) {
    const [visible, changeState]=useState(false)
    const [len, setLen] = useState(0);
    const [text, setText] = useState('');
    // 错误提示
    const [erroType, setErrorType] = useState('');
    // 是否点击取消
    const [isCancel, setCancel] = useState(false);
    // 初始化数据
    useEffect(()=>{
        if (visible) {
            setErrorType('')
            setText('')
            setLen(0);
            setCancel(false)
        }
    },[visible])

    // 提交投诉
    const handleSubmit = (e) => {
        if (e.target.value.length === 0) {
            setText()
            setLen(0)
            setErrorType('请输入投诉原因！')
        }
        if (e.target.value) {
            const valueLength = e.target.value.length
            if (valueLength <= 30) {
                setLen(valueLength);
                if (e.target.value) {
                    setText(e.target.value.trim())
                }
                setErrorType('')
            } else {
                setText(e.target.value.slice(0,30))
                setLen(30)
                setErrorType('最多只能输入30字！')
            }
        }
    }

    // 失去焦点验证
    const handeOnblur = (e) => {
        setTimeout(() => {
            if (!isCancel && !text) {
                setErrorType('请输入投诉原因！')
            }
        },200)
    }

    // 提交数据
    const submit = () => {
        if (text) {
            complainReson(text)
            changeState(false)
            return
        }
        setErrorType('请输入投诉原因！')
    }

    // 取消
    const cancelBtn = () => {
        setCancel(true)
        changeState(false)
    }

    return (
        <div className='reformModel'>
            <Button
            className='white-button btnWidth'
            onClick={() => changeState(true)}
            >投诉</Button>
            <div>
                <Modal
                width={'5rem'}
                visible={visible}
                footer={null}
                closable={false}
                bodyStyle={{ padding: 0 }}
                maskClosable={false}
                mask={false}
                >
                    <div className='reformModel' >
                        <div className='headTitle'>
                            <span className='titleText'>维修投诉</span>
                            <span onClick={() => changeState(false)} className='cancelBtn' style={{cursor: 'pointer'}}>X</span>
                        </div>
                        <div className='bodyConten'>
                            <div className="flex">
                                <TextArea  
                                placeholder="请输入投诉原因" 
                                className='textarea'
                                style={{width: '4.5rem'}} 
                                onBlur ={handeOnblur}
                                onChange={handleSubmit}
                                value={text}
                                />
                                <div className='errMsg'>
                                    <span style={{color: '#f40'}}>{erroType ? erroType : ''}</span>
                                    <span>{len}/30</span>
                                </div>
                            </div>
                            <div className='btnsBox'>
                                <Button 
                                className="white-button cancleBtn btnWidth" 
                                htmlType="reset" 
                                onClick={cancelBtn}
                                id='cancel'
                                >取消</Button>
                                <Button className="blue-button okBtn btnWidth" onClick={submit}>确定</Button>
                            </div>
                        </div>
                    </div>
                </Modal>
            </div>
        </div>
    )
}


export default connect(({ deviceRepair }) => ({
    deviceRepair
  }))(ComplaintModel)